<template>
  <div class="add-movie-container">
    <h1>添加新电影</h1>
    <form @submit.prevent="submitMovie" class="movie-form">
      <div class="form-group">
        <label for="title">电影标题*</label>
        <input v-model="movieForm.title" type="text" id="title" required>
      </div>
      
      <div class="form-group">
        <label for="description">剧情简介*</label>
        <textarea v-model="movieForm.description" id="description" required></textarea>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="year">上映年份*</label>
          <input v-model="movieForm.year" type="number" id="year" required>
        </div>
        
        <div class="form-group">
          <label for="rating">评分 (1-10)*</label>
          <input v-model="movieForm.rating" type="number" min="1" max="10" id="rating" required>
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="duration">时长 (分钟)*</label>
          <input v-model="movieForm.duration" type="number" id="duration" required>
        </div>
        
        <div class="form-group">
          <label for="category">分类*</label>
          <select v-model="movieForm.category" id="category" required>
            <option value="动作">动作</option>
            <option value="喜剧">喜剧</option>
            <option value="科幻">科幻</option>
            <option value="爱情">爱情</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <label for="director">导演*</label>
        <input v-model="movieForm.director" type="text" id="director" required>
      </div>
      
      <div class="form-group">
        <label for="actors">主演*</label>
        <input v-model="movieForm.actors" type="text" id="actors" required>
      </div>
      
      <div class="form-group">
        <label for="poster">海报URL</label>
        <input v-model="movieForm.poster" type="url" id="poster">
      </div>
      
      <button type="submit" class="submit-btn" :disabled="loading">
        {{ loading ? '提交中...' : '提交' }}
      </button>
      <p v-if="error" class="error-message">{{ error }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import api from '@/services/api'

const authStore = useAuthStore()
const router = useRouter()

const movieForm = ref({
  title: '流浪地球2',
  description: '太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新的家园。',
  year: 2023,
  rating: 8.5,
  duration: 173,
  category: '科幻',
  director: '郭帆',
  actors: '吴京, 刘德华, 李雪健',
  poster: ''
})

const loading = ref(false)
const error = ref(null)

const submitMovie = async () => {
  try {
    if (!authStore.user?.id) {
      return router.push('/login?redirect=/movies/add')
    }

    loading.value = true
    error.value = null

    await api.addMovie({
      ...movieForm.value,
      userId: authStore.user.id
    })

    router.push('/movies')
  } catch (err) {
    error.value = err.message || '提交失败，请重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/add-movie';
</style>